一个简单的JQUERY下拉菜单插件

 一.按照惯例，先上DOM结构

<div id="menu">             <ul>                 <li>                     <a href="#nogo">主菜单一</a>                     <ul>                         <li><a href="http://usual.blog.51cto.com">子菜单一</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单一</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单一</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单一</a></li>                     </ul>                 </li>                  <li>                     <a href="#nogo">主菜单二</a>                     <ul>                         <li><a href="http://usual.blog.51cto.com">子菜单二</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单二</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单二</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单二</a></li>                     </ul>                 </li>                  <li>                     <a href="#nogo">主菜单三</a>                     <ul>                         <li><a href="http://usual.blog.51cto.com">子菜单三</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单三</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单三</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单三</a></li>                     </ul>                 </li>                  <li>                     <a href="#nogo">主菜单四</a>                     <ul>                         <li><a href="http://usual.blog.51cto.com">子菜单四</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单四</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单四</a></li>                         <li><a href="http://usual.blog.51cto.com">子菜单四</a></li>                     </ul>                 </li>                          </ul>                           </div>

二.有了DOM结构，再确定样式

#menu{                 font-family:Helvetica;             }             #menu ul{                 list-style:none;                 margin:0px;                 padding:0px;                 width:250px;             }             #menu ul li{                 margin:1px 0px;                 padding:0px;                              }             #menu ul li a{                 height:30px;                 line-height:30px;                 padding-left:10px;                 display:block;                 text-decoration:none;                 font-weight:bold;                 color:#333;                 font-size:16px;                 border:1px solid #ccc;             }             #menu ul li a:Hover{                 background:#a0b4dc;             }             #menu ul li li a{                 border:none;                 height:25px;                 line-height:25px;             }             #menu ul li li a:hover{                 background:yellow;             }             #menu ul li ul{                 display:none;             }

三.然后就是最重要的JQUERY部分了

(function($){     $.fn.slideMenu=function(){         return this.each(function(){             var menu=$(this);             menu.find("ul li>a").bind("click",function(event){                 var currentLink=$(event.currentTarget);                 if(currentLink.parent().find("ul.active").size()==1){       //如果被点击的连接的子菜单已经显示了，就隐藏该子菜单                     hide(currentLink);                                  }                 else if(menu.find("ul li ul.active").size()==0){            //如果所有的子菜单都没有显示，则显示点击的子菜单                                          show(currentLink);                                  }                 else{                                                       //显示点击的子菜单，隐藏已显示的子菜单                     menu.find("ul li ul.active").slideUp("medium",function(){                                              menu.find("ul li ul").removeClass("active");                         show(currentLink);                                          });                 }                });             var show=function(currentLink){                                 //显示子菜单方法                 currentLink.parent().find("ul").addClass("active");                 currentLink.parent().find("ul").slideDown("medium");                          }              var hide=function(currentLink){                                 //隐藏子菜单方法                 currentLink.parent().find("ul").removeClass("active");                 currentLink.parent().find("ul").slideUp("medium");                          }         });     }   })(jQuery);

四.引用。

1. $(document).ready(function(){ 

2.         $("#menu").slideMenu(); 
   

3.      })